import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import '../style/less/main.css';
import axios from '../api/index';
import {Table,mountNode } from 'antd';

class Tables extends React.Component{
    constructor(){
        super();
        this.state = {
            columns :[{
                title: 'Name',
                dataIndex: 'name',
                key: 'name',
              }, {
                title: 'Age',
                dataIndex: 'age',
                key: 'age',
                width: '12%',
              }, {
                title: 'Address',
                dataIndex: 'address',
                width: '30%',
                key: 'address',
              }],
              rowSelection:{
                onChange: (selectedRowKeys, selectedRows) => {
                  console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                },
                onSelect: (record, selected, selectedRows) => {
                  console.log(record, selected, selectedRows);
                },
                onSelectAll: (selected, selectedRows, changeRows) => {
                  console.log(selected, selectedRows, changeRows);
                },
              },
              data:null
        }
        
    }
    componentWillMount(){
        axios.api.mockData3().then((res)=>{
            let mock = res.array;
            this.setState({
                data:mock
            })
        });
      
    }
    render(){
        return(<Table  className="tableOne" columns={this.state.columns} rowSelection={this.state.rowSelection} dataSource={this.state.data} />
           )
    }
}

export default Tables;